<template>
    <Card>
        <p slot="title" class="card-title">
            <Icon type="person-stalker"></Icon>
            <span>查询</span>
        </p>
        <template>
            <Row>
                <Col span="24">
                <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  style="flex: 0 0 100%" inline>
                    <Col span="8">
                    <Form-item label="商户名" prop="trueOrFalse">
                        <Input v-model="dataInfo.merName" placeholder="" style="width: 200px"/>
                    </Form-item>
                    </Col>

                    <!--<Col span="8">-->
                    <!--<Form-item label="姓名" prop="trueOrFalse">-->
                    <!--<Input v-model="dataInfo.name" placeholder="" style="width: 200px"/>-->
                    <!--</Form-item>-->
                    <!--</Col>-->

                    <Col span="8">
                    <Form-item label="商家状态" prop="state" style="width: 200px">
                        <Select v-model="dataInfo.signState"  style="width: 200px">
                            <Option value="1">拒绝</Option>
                            <Option value="2">通过</Option>
                            <Option value="3">未审核</Option>
                        </Select>
                    </Form-item>
                    </Col>

                    <!--<Col span="8">-->
                    <!--<Form-item label="添加时间" prop="请选择时间" style="width: 200px">-->
                    <!--<DatePicker type="daterange" :options="options2"  v-model="optionsData"confirm placement="bottom-end" @on-ok="handleOk(optionsData)" placeholder="请选择时间" style="width: 200px"></DatePicker>-->

                    <!--</Form-item>-->
                    <!--</Col>-->

                    <Col span="8">
                    <Form-item label="状态" prop="productCode" style="width: 200px">
                        <Select v-model="dataInfo.state"  style="width: 200px">
                            <Option value="1">禁用</Option>
                            <Option value="2">启用</Option>
                        </Select>
                    </Form-item>
                    </Col>
                </Form>
                </Col>
                <div style="margin-top: 2rem;text-align: center">
                    <Button type="primary" icon="ios-search" @click="doGetDetail" style="margin-right: 8px">搜索</Button>
                    <Button type="primary"  @click="addWhite" style="margin-right: 8px">添加</Button>
                </div>
            </Row>

            <div style="margin-top: 2rem;text-align: center">
                <Table ref="table"  class="margin-bottom-10" :columns="columns"
                       :border="setting.showBorder" :data="data.content" style="margin-top: 1.5rem">
                </Table>
                <Page :total="data.totalElements" class="tr" @on-change="pageChange":current.sync="dataFilter.current" :page-size="data.size"
                      @on-page-size-change="pageSizeChange" show-elevator show-sizer>
                </Page>
            </div>

        </template>

        <Modal v-model="addWhiteModel" draggable
               :scrollable='false' fullscreen
               title="商户添加"
               :styles="{top: '10px',left: '40%'}"
               class-name="vertical-center-modal"
               @on-ok="ok">
            <Form ref="search_info" class="search-info" :label-width="150" :model="search_info" inline >
                <Form-item label="商户名称" prop="trueOrFalse">
                    <Input v-model="formInfos.mname" placeholder="用户姓名" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="代理商" prop="trueOrFalse">
                    <Input v-model="formInfos.agent" placeholder="代理商" class="form-item-inpu" />
                </Form-item>

                <Form-item label="商户地址" prop="phone">
                    <Input v-model="formInfos.madr" placeholder="商户地址" class="form-item-inpu" />
                </Form-item>

                <Form-item label="区域" prop="amount">
                    <Input v-model="formInfos.area" placeholder="区域" class="form-item-inpu"/>
                </Form-item>
                <Form-item label="营业执照注册号" prop="trueOrFalse">
                    <Input v-model="formInfos.businessCode" placeholder="营业执照注册号"class="form-item-inpu" />
                </Form-item>

                <Form-item label="组织机构代码" prop="trueOrFalse">
                    <Input v-model="formInfos.institutionCode" placeholder="组织机构代码" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="税务登记号" prop="trueOrFalse">
                    <Input v-model="formInfos.taxCode" placeholder="税务登记号" class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业的统一社会信用代码" prop="trueOrFalse">
                    <Input v-model="formInfos.creditCode" placeholder="企业的统一社会信用代码" class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业经营地址" prop="trueOrFalse">
                    <Input v-model="formInfos.corpBusinessAddress" placeholder="企业经营地址" class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业注册地址" prop="trueOrFalse">
                    <Input v-model="formInfos.corpRegAddress" placeholder="企业注册地址" class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业固定电话" prop="trueOrFalse">
                    <Input v-model="formInfos.corpFixedTelephone" placeholder="企业固定电话" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="经营范围" prop="trueOrFalse">
                    <Input v-model="formInfos.businessScope" placeholder="经营范围" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人姓名" prop="trueOrFalse">
                    <Input v-model="formInfos.legalName" placeholder="法人姓名" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人证件号码" prop="trueOrFalse">
                    <Input v-model="formInfos.legalCertId" placeholder="法人证件号码" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人手机号" prop="trueOrFalse">
                    <Input v-model="formInfos.legalMobile" placeholder="法人手机号" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="企业联系人姓名" prop="trueOrFalse">
                    <Input v-model="formInfos.contactName" placeholder="企业联系人姓名" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="联系人手机号" prop="trueOrFalse">
                    <Input v-model="formInfos.contactMobile" placeholder="联系人手机号" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="联系人邮箱" prop="trueOrFalse">
                    <Input v-model="formInfos.contractEmail" placeholder="联系人邮箱" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行账户名" prop="trueOrFalse">
                    <Input v-model="formInfos.bankAcctName" placeholder="开户银行账户名" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行" prop="trueOrFalse">
                    <Input v-model="formInfos.bankId" placeholder="开户银行" class="form-item-inpu" />
                </Form-item>

                <Form-item label="开户银行账户" prop="trueOrFalse">
                    <Input v-model="formInfos.bankAcctNo" placeholder="开户银行账户"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行支行名称" prop="trueOrFalse">
                    <Input v-model="formInfos.bankBranch" placeholder="开户银行支行名称" class="form-item-inpu" />
                </Form-item>

                <Form-item label="开户行省份" prop="trueOrFalse">
                    <Input v-model="formInfos.bankProv" placeholder="开户行省份"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行地区" prop="trueOrFalse">
                    <Input v-model="formInfos.bankArea" placeholder="开户银行地区"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="行业" prop="trueOrFalse">
                    <Input v-model="formInfos.industry" placeholder="行业" class="form-item-inpu" />
                </Form-item>


                <Form-item label="扣款手续费率" prop="trueOrFalse">
                    <Input v-model="formInfos.commission" placeholder="行业"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="提现手续费率" prop="trueOrFalse">
                    <Input v-model="formInfos.withdrawal" placeholder="行业"  class="form-item-inpu"/>
                </Form-item>


                <Form-item label="创建时间" prop="请选择时间" >
                <DatePicker type="date" show-week-numbers  v-model="formInfos.createTime" placeholder="请选择时间" style="width: 250px"></DatePicker>
                </Form-item>


                <template>
                    <Form-item label="营业执照名称" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfos.licensePath">
                                <!--<div class="demo-upload-list-cover">-->
                                    <!--<Icon type="ios-eye-outline" @click.native="handleView(imageUrl)"></Icon>-->
                                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove(imageUrl)"></Icon>-->
                                <!--</div>-->
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                :on-format-error="handleFormatError"
                                :on-exceeded-size="handleMaxSize"
                                type="drag"
                                :action="action1"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <Modal title="查看图片" v-model="visible"  @on-ok="imageOk"
                               @on-cancel="imageCancel">
                            <img :src="formInfos.licensePath"  style="width: 100%">
                        </Modal>
                    </Form-item>
                </template>

                <template>
                    <Form-item label="身份证正面" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfos.idTcPath">
                                <!--<div class="demo-upload-list-cover">-->
                                    <!--<Icon type="ios-eye-outline" @click.native="handleView()"></Icon>-->
                                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>-->
                                <!--</div>-->
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :on-success="handleSuccess1"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                type="drag"
                                :action="action2"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <Modal title="查看图片" v-model="visible"  @on-ok="imageOk1"
                               @on-cancel="imageCancel1">
                            <img :src="formInfos.idTcPath"  style="width: 100%">
                        </Modal>
                    </Form-item>
                </template>


                <template>
                    <Form-item label="身份证反面" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfos.idFcPath">
                                <!--<div class="demo-upload-list-cover">-->
                                    <!--<Icon type="ios-eye-outline" @click.native="handleView()"></Icon>-->
                                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>-->
                                <!--</div>-->
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :on-success="handleSuccess2"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                type="drag"
                                :action="action3"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <Modal title="查看图片" v-model="visible"  @on-ok="imageOk2"
                               @on-cancel="imageCancel2">
                            <img :src="formInfos.idFcPath" v-if="visible" style="width: 100%">
                        </Modal>
                    </Form-item>
                </template>

            </Form>
        </Modal>

        <Modal v-model="updateWhiteModel" draggable
               title="商户编辑"
               :scrollable='false' fullscreen
               :styles="{top: '10px',left: '40%'}"
               class-name="vertical-center-modal"
               @on-ok="onOk">
            <Form ref="search_info" class="search-info" :label-width="140" :model="search_info" inline >
                <Form-item label="商户名称" prop="trueOrFalse">
                    <Input v-model="formInfo.mname" placeholder="用户姓名" class="form-item-inpu"/>
                </Form-item>

                <Form-item label="代理商" prop="trueOrFalse">
                    <Input v-model="formInfo.agent" placeholder="代理商"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="商户地址" prop="phone">
                    <Input v-model="formInfo.madr" placeholder="商户地址"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="区域" prop="amount">
                    <Input v-model="formInfo.area" placeholder="区域"  class="form-item-inpu"/>
                </Form-item>
                <Form-item label="营业执照注册号" prop="trueOrFalse">
                    <Input v-model="formInfo.businessCode" placeholder="营业执照注册号"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="组织机构代码" prop="trueOrFalse">
                    <Input v-model="formInfo.institutionCode" placeholder="组织机构代码"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="税务登记号" prop="trueOrFalse">
                    <Input v-model="formInfo.taxCode" placeholder="税务登记号"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业的统一社会信用代码" prop="trueOrFalse">
                    <Input v-model="formInfo.creditCode" placeholder="企业的统一社会信用代码"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业经营地址" prop="trueOrFalse">
                    <Input v-model="formInfo.corpBusinessAddress" placeholder="企业经营地址"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业注册地址" prop="trueOrFalse">
                    <Input v-model="formInfo.corpRegAddress" placeholder="企业注册地址"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="企业固定电话" prop="trueOrFalse">
                    <Input v-model="formInfo.corpFixedTelephone" placeholder="企业固定电话"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="经营范围" prop="trueOrFalse">
                    <Input v-model="formInfo.businessScope" placeholder="经营范围"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人姓名" prop="trueOrFalse">
                    <Input v-model="formInfo.legalName" placeholder="法人姓名"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人证件号码" prop="trueOrFalse">
                    <Input v-model="formInfo.legalCertId" placeholder="法人证件号码"   class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人手机号" prop="trueOrFalse">
                    <Input v-model="formInfo.legalMobile" placeholder="法人手机号"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="企业联系人姓名" prop="trueOrFalse">
                    <Input v-model="formInfo.contactName" placeholder="企业联系人姓名"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="联系人手机号" prop="trueOrFalse">
                    <Input v-model="formInfo.contactMobile" placeholder="联系人手机号"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="联系人邮箱" prop="trueOrFalse">
                    <Input v-model="formInfo.contractEmail" placeholder="联系人邮箱"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行账户名" prop="trueOrFalse">
                    <Input v-model="formInfo.bankAcctName" placeholder="开户银行账户名"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行" prop="trueOrFalse">
                    <Input v-model="formInfo.bankId" placeholder="开户银行"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行账户" prop="trueOrFalse">
                    <Input v-model="formInfo.bankAcctNo" placeholder="开户银行账户"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行支行名称" prop="trueOrFalse">
                    <Input v-model="formInfo.bankBranch" placeholder="开户银行支行名称"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户行省份" prop="trueOrFalse">
                    <Input v-model="formInfo.bankProv" placeholder="开户行省份"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行地区" prop="trueOrFalse">
                    <Input v-model="formInfo.bankArea" placeholder="开户银行地区"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="行业" prop="trueOrFalse">
                    <Input v-model="formInfo.industry" placeholder="行业"  class="form-item-inpu"/>
                </Form-item>


                <Form-item label="扣款手续费率" prop="trueOrFalse">
                    <Input v-model="formInfo.commission" placeholder="行业"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="提现手续费率" prop="trueOrFalse">
                    <Input v-model="formInfo.withdrawal" placeholder="行业"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="创建时间" prop="请选择时间" >
                    <DatePicker type="date" show-week-numbers  v-model="formInfo.createTime" placeholder="请选择时间" style="width: 140px"></DatePicker>
                </Form-item>


                <template>
                    <Form-item label="营业执照名称" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfo.licensePath">
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
                                    <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                                </div>
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                :on-format-error="handleFormatError"
                                :on-exceeded-size="handleMaxSize"
                                type="drag"
                                :action="action1"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <Modal title="查看图片" v-model="visible"  @on-ok="imageOk"
                               @on-cancel="imageCancel">
                            <img :src="formInfo.licensePath"  style="width: 100%">
                        </Modal>
                    </Form-item>
                </template>

                <template>
                    <Form-item label="身份证正面" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfo.idTcPath">
                                <!--<div class="demo-upload-list-cover">-->
                                    <!--<Icon type="ios-eye-outline" @click.native="handleView()"></Icon>-->
                                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>-->
                                <!--</div>-->
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :on-success="handleSuccess1"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                type="drag"
                                :action="action2"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <Modal title="查看图片" v-model="visible"  @on-ok="imageOk1"
                               @on-cancel="imageCancel1">
                            <img :src="formInfo.idTcPath"  style="width: 100%">
                        </Modal>
                    </Form-item>
                </template>


                <template>
                    <Form-item label="身份证反面" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfo.idFcPath">
                                <!--<div class="demo-upload-list-cover">-->
                                    <!--<Icon type="ios-eye-outline" @click.native="handleView()"></Icon>-->
                                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>-->
                                <!--</div>-->
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :on-success="handleSuccess2"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                type="drag"
                                :action="action3"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <Modal title="查看图片" v-model="visible"  @on-ok="imageOk2"
                               @on-cancel="imageCancel2">
                            <img :src="formInfo.idFcPath" v-if="visible" style="width: 100%">
                        </Modal>
                    </Form-item>
                </template>


            </Form>
        </Modal>

        <Modal v-model="getMountModel" draggable scrollable title="提现"  @on-ok="onOkDetget">
            <Form ref="search_info" class="search-info" :label-width="140" :model="search_info" inline >
                <Form-item label="提现金额" prop="amount">
                    <Input v-model="getMountModels.amount" style="width: 250px" placeholder="请输入提现金额" />
                </Form-item>

                <Form-item label="银行卡号" prop="amount">
                    <Input v-model="getMountModels.bankAcctNo" style="width: 250px" placeholder="请输入银行卡号" />
                </Form-item>

                <Form-item label="备注" prop="amount">
                    <Input v-model="getMountModels.description"  style="width: 250px"placeholder="备注" />
                </Form-item>

                <Form-item label="提现" prop="productCode" >
                    <Select v-model="getMountModels.arrivalTime" style="width: 250px" >
                        <Option value="0" >实时扣款</Option>
                        <Option value="1">T+1扣款</Option>
                        <Option value="2">T+2扣款</Option>
                    </Select>
                </Form-item>

            </Form>
        </Modal>

        <Modal v-model="updateDeWhiteModel" draggable
               title="查看详情"
               :scrollable='false' fullscreen
               :styles="{top: '10px',left: '40%'}"
               class-name="vertical-center-modal"
               @on-ok="onOkDet">
            <Form ref="search_info" class="search-info" :label-width="140" :model="search_info" inline >
                <Form-item label="商户名称" prop="trueOrFalse">
                    <Input v-model="formInfo.mname" disabled placeholder="用户姓名"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="代理商" prop="trueOrFalse">
                    <Input v-model="formInfo.agent" disabled placeholder="代理商"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="商户地址" prop="phone">
                    <Input v-model="formInfo.madr" disabled placeholder="商户地址"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="区域" prop="amount">
                    <Input v-model="formInfo.area" disabled placeholder="区域"  class="form-item-inpu"/>
                </Form-item>
                <Form-item label="营业执照注册号" prop="trueOrFalse">
                    <Input v-model="formInfo.businessCode" disabled placeholder="营业执照注册号"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="组织机构代码" prop="trueOrFalse">
                    <Input v-model="formInfo.institutionCode"disabled placeholder="组织机构代码"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="税务登记号" prop="trueOrFalse">
                    <Input v-model="formInfo.taxCode"  disabled placeholder="税务登记号"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="企业的统一社会信用代码" prop="trueOrFalse">
                    <Input v-model="formInfo.creditCode" disabled placeholder="企业的统一社会信用代码"  class="form-item-inpu" />
                </Form-item>

                <Form-item label="企业经营地址" prop="trueOrFalse">
                    <Input v-model="formInfo.corpBusinessAddress" disabled  placeholder="企业经营地址"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="企业注册地址" prop="trueOrFalse">
                    <Input v-model="formInfo.corpRegAddress" disabled placeholder="企业注册地址"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="企业固定电话" prop="trueOrFalse">
                    <Input v-model="formInfo.corpFixedTelephone" disabled  placeholder="企业固定电话"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="经营范围" prop="trueOrFalse">
                    <Input v-model="formInfo.businessScope"  disabled placeholder="经营范围"   class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人姓名" prop="trueOrFalse">
                    <Input v-model="formInfo.legalName" disabled placeholder="法人姓名"   class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人证件号码" prop="trueOrFalse">
                    <Input v-model="formInfo.legalCertId" disabled  placeholder="法人证件号码"   class="form-item-inpu"/>
                </Form-item>

                <Form-item label="法人手机号" prop="trueOrFalse">
                    <Input v-model="formInfo.legalMobile" disabled placeholder="法人手机号"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="企业联系人姓名" prop="trueOrFalse">
                    <Input v-model="formInfo.contactName" disabled placeholder="企业联系人姓名"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="联系人手机号" prop="trueOrFalse">
                    <Input v-model="formInfo.contactMobile" disabled placeholder="联系人手机号"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="联系人邮箱" prop="trueOrFalse">
                    <Input v-model="formInfo.contractEmail" disabled placeholder="联系人邮箱"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行账户名" prop="trueOrFalse">
                    <Input v-model="formInfo.bankAcctName" disabled placeholder="开户银行账户名"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行" prop="trueOrFalse">
                    <Input v-model="formInfo.bankId" disabled placeholder="开户银行"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行账户" prop="trueOrFalse">
                    <Input v-model="formInfo.bankAcctNo" disabled placeholder="开户银行账户"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行支行名称" prop="trueOrFalse">
                    <Input v-model="formInfo.bankBranch" disabled placeholder="开户银行支行名称"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户行省份" prop="trueOrFalse">
                    <Input v-model="formInfo.bankProv" disabled placeholder="开户行省份"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="开户银行地区" prop="trueOrFalse">
                    <Input v-model="formInfo.bankArea" disabled placeholder="开户银行地区"  class="form-item-inpu"/>
                </Form-item>

                <Form-item label="行业" prop="trueOrFalse">
                    <Input v-model="formInfo.industry" disabled  placeholder="行业"  class="form-item-inpu"/>
                </Form-item>


                <Form-item label="扣款手续费率" prop="trueOrFalse">
                    <Input v-model="formInfo.commission" placeholder="行业"  disabled class="form-item-inpu"/>
                </Form-item>

                <Form-item label="提现手续费率" prop="trueOrFalse">
                    <Input v-model="formInfo.withdrawal" placeholder="行业"  disabled class="form-item-inpu"/>
                </Form-item>


                <Form-item label="创建时间" prop="请选择时间" >
                    <DatePicker type="date" show-week-numbers  disabled v-model="formInfo.createTime" placeholder="请选择时间" style="width: 140px"></DatePicker>
                </Form-item>

                <template>
                    <Form-item label="营业执照名称" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfo.licensePath">
                            </template>
                        </div>
                    </Form-item>
                </template>

                <template>
                    <Form-item label="身份证正面" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfo.idTcPath">
                            </template>
                        </div>
                    </Form-item>
                </template>


                <template>
                    <Form-item label="身份证反面" prop="trueOrFalse">
                        <div class="demo-upload-list">
                            <template >
                                <img :src="formInfo.idFcPath">
                            </template>
                        </div>
                    </Form-item>
                </template>

            </Form>
        </Modal>
    </Card>
</template>

<script>
    import {post,get} from '../../../libs/axios-cfg';
    import idTrue from './compintents/idTrue'
    import moment from 'moment'
    export default {
        name: "index",
        components: {
            idTrue
        },
        data () {
            return {
                action1: 'http://mer.jundabaoli.com/merchant/file/upload/'+Math.random()+'.png',
                action2: 'http://mer.jundabaoli.com/merchant/file/upload/'+Math.random()+'.png',
                action3: 'http://mer.jundabaoli.com/merchant/file/upload/'+Math.random()+'.png',
                imageUrl: '',
                imageUrl1: '',
                imageUrl2: '',
                defaultList: [],
                uploadList1: [],
                imgName: '',
                visible: false,
                uploadList: [],

                getMountModels: {
                    arrivalTime: '',
                    description: '',
                    amount: '',
                    bankAcctNo: ''
                },

                getMountModel: false,
                getMountItem: {},
                addWhiteModel: false,
                updateWhiteModel: false,
                updateDeWhiteModel: false,
                tOrF_list: [],
                optionsData: '',
                search_info: {
                    signState: '',
                    name: '',
                    status: '',
                    productCode: ''
                },
                dataFilter: {
                    page: 0,
                    size: 10
                },
                updataId: '',
                formInfoup: {
                    uname:"",
                    uid :"",
                    phone: '',
                    amount: '',
                    ucard:"",
                    bankName:"",
                    createTime:"",
                    // signTime:"",
                    // ustate: '',
                    property:'',
                    mid: "",
                    signState:'1'
                },
                formInfos: {
                    mname:"",
                    agent:"",
                    createTime:"",
                    num:2,
                    mstate:1,
                    mrank:1,
                    madr:"",
                    area:"",
                    businessCode:"",
                    institutionCode:"",
                    taxCode:"",
                    creditCode:"",
                    //licenseStartDate:"2018-12-22",
                    //licenseEndDate:"2010-12-11",
                    corpBusinessAddress:"",
                    corpRegAddress:"",
                    corpFixedTelephone:"",
                    businessScope:"",
                    legalName:"",
                    legalCertType:"1",
                    legalCertId:"",
                   // legalCertStartDate:"2011-01-01",
                    //legalCertEndDate:"法人证件结束日期",
                    legalMobile:"",
                    contactName:"",
                    contactMobile:"",
                    contractEmail:"",
                    bankAcctName:"",
                    bankId:"",
                    bankAcctNo:"",
                    bankBranch:"",
                    bankProv:"",
                    bankArea:"",
                    industry:"",
                    commission: '',
                    withdrawal: '',
                    licensePath: '',
                    idTcPath: '',
                    idFcPath: ''
                },
                formInfo: {
                    mname:"",
                    agent:"",
                    createTime:"",
                    num:2,
                    mstate:1,
                    mrank:1,
                    madr:"",
                    area:"",
                    businessCode:"",
                    institutionCode:"",
                    taxCode:"",
                    creditCode:"",
                    //licenseStartDate:"2018-12-22",
                    //licenseEndDate:"2010-12-11",
                    corpBusinessAddress:"",
                    corpRegAddress:"",
                    corpFixedTelephone:"",
                    businessScope:"",
                    legalName:"",
                    legalCertType:"1",
                    legalCertId:"",
                    // legalCertStartDate:"2011-01-01",
                    //legalCertEndDate:"法人证件结束日期",
                    legalMobile:"",
                    contactName:"",
                    contactMobile:"",
                    contractEmail:"",
                    bankAcctName:"",
                    bankId:"",
                    bankAcctNo:"",
                    bankBranch:"",
                    bankProv:"",
                    bankArea:"",
                    industry:"",
                    commission: '',
                    withdrawal: '',
                    licensePath: '',
                    idTcPath: '',
                    idFcPath: ''
                },
                setting: {
                    loading: true,
                    showBorder: true
                },
                dataInfo: {
                    state: '',
                    endTime: '',
                    startTime: '',
                    signState: '',
                    merName: ''
                },
                options2: {
                    shortcuts: [
                        {
                            text: '本周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        },
                        {
                            text: '本月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        },
                        {
                            text: '最近3月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        }
                    ]
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '商户名',
                        key: 'mname'
                    },
                    {
                        title: '姓名',
                        key: 'contactName'
                    },
                    {
                        title: '联系号码',
                        key: 'contactMobile'
                    },
                    {
                        title: '联系地址',
                        key: 'corpBusinessAddress'
                    },
                    {
                        title: '审核状态',
                        key: 'signState'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render:(h,params)=>{
                            return h('span',
                                {
                                    style: {color: params.row.userStatus == 1 ? 'green' : 'red'
                                    }
                                }, params.row.mstate == 1 ? '禁用' : '启用')
                        },

                    },

                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'enable',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params.row);
                                        }
                                    }

                                }, '删除'),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.update(params.row)
                                        }
                                    }

                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.sync(params.row)
                                        }
                                    }

                                }, '禁用'),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.start(params.row)
                                        }
                                    }

                                }, '启用'),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.updateDetail(params.row)
                                        }
                                    }

                                }, '查看详情'),

                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.getMount(params.row)
                                        }
                                    }

                                }, '提现'),
                            ]);
                        }
                    },
                ],
                data: []
            }
        },
        mounted () {
            this.getWriteDataList()
            this.uploadList = this.$refs.upload.fileList;

        },
        methods : {
            imageCancel() {
                this.addWhiteModel =true

            },
            imageOk(){
                this.addWhiteModel =false
            },
            imageCancel1() {
                this.addWhiteModel =true

            },
            imageOk1(){
                this.addWhiteModel =false
            },
            imageCancel2() {
                this.addWhiteModel =true

            },
            imageOk2(){
                this.addWhiteModel =false
            },
            handleView (name) {
                this.imgName = name;
                this.visible = true;
                this.addWhiteModel =false
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = res.data;
                this.formInfos.licensePath = res.data
                this.imageUrl = res.data
                file.name = '7eb99afb9d5f317c912f08b5212fd69a11';
            },
            handleSuccess1 (res, file) {
                file.url = res.data;
                this.formInfos.idTcPath = res.data

                file.name = '7eb99afb9d5f317c912f08b5212fd69a112';
            },
            handleSuccess2 (res, file) {
                file.url = res.data;
                this.formInfos.idFcPath = res.data
                file.name = '7eb99afb9d5f317c912f08b5212fd69a11';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            },

            async reject (obj) {
                // signState  1 拒绝 2 同意
                try{
                    let res = await post('/approval/merchant',{
                        "id": obj.id,
                        "signTime": obj.signTime,
                        "signState":1
                    })
                    this.$Message.success(res.data)
                }catch (e){
                    this.$throw(e)
                }
            },
            async sync (obj) {
                try{
                    let res = await get('/merchant/lock/'+obj.mid + '/1')
                    this.$Message.success(res.msg)
                    this.getWriteDataList()
                }catch (e){
                    this.$throw(e)
                }
            },
            async updateDetail (obj) {
               try {
                   let res = await get('/merchant/select/'+obj.mid)
                   this.formInfo = res.data
                   this.updateDeWhiteModel = true
               }catch (e){
                   this.$throw(e)
               }


            },
            onOkDet(){
                this.updateDeWhiteModel =false
            },
            async start (obj) {
                try{
                    let res = await get('/merchant/lock/'+obj.mid + '/2')
                    this.$Message.success(res.msg)
                    this.getWriteDataList()

                }catch (e){
                    this.$throw(e)
                }
            },
            async approve(obj) {
                // signState  1 拒绝 2 同意
                try{
                    let res = await post('/approval/merchant',{
                        "id": obj.id,
                        "signTime": obj.signTime,
                        "signState":2
                    })
                    this.$Message.success(res.data)
                }catch (e){
                    this.$throw(e)
                }
            },
           async onOkDetget () {
                let obj= this.getMountItem

                try {
                    let res = await post ('/withhold/cashOut',{
                        uname: obj.bankAcctName,
                        uid: obj.legalCertId,
                        ucard: obj.bankAcctNo,
                        mid: obj.mid,
                        uphone: obj.legalMobile,
                        bankName: obj.bankId,
                        // bankAcctNo: this.getMountModels.bankAcctNo,
                        description: this.getMountModels.description,
                        arrivalTime: this.getMountModels.arrivalTime,
                        amount: this.getMountModels.amount
                    })
                    this.$Message.success(res.data)
                    this.getMountModels = {
                        description: '',
                        arrivalTime: '',
                        amount: ''
                    }
                    this.getWriteDataList()
                }catch (e){
                    this.$throw(e)
                }
            },
            async getMount (obj){
                 this.getMountModel = true
                 this.getMountItem = obj
            },
           async update (obj) {
              try {
                  let res = await get('/merchant/select/'+obj.mid)
                  this.formInfo = res.data
                 // this.getMountItem = res.data
                  this.updateWhiteModel = true
              }catch (e){
                  this.$throw(e)
              }

            },
            async ok(){
                try {
                    let res = await post ('/merchant/save',this.formInfo)
                    this.$Message.success( res.msg)
                    this.addWhiteModel = false
                    this.getWriteDataList()
                }catch (e){
                    this.$throw(e)
                }

            },
            async getWriteDataList () {
                try {
                    let res = await post ('/merchant/query/list',{
                        endTime: this.dataInfo.endTime,
                        page: this.dataFilter.page,
                        size: this.dataFilter.size,
                        merName: this.dataInfo.merName,
                        merState: this.dataInfo.merState,
                        startTime: this.dataInfo.startTime,
                        state: this.dataInfo.state
                    })
                    this.data = res.data
                }catch (e){
                    this.$throw(e)
                }
            },
            async delete(obj) {
                try{
                    let res = await get ('/merchant/delete/'+obj.mid)
                    this.$Message.success(obj.mname +'删除'+res.msg)
                    this.getWriteDataList()
                } catch (e){
                    this.$throw(e)
                }
            },
            doGetDetail () {
                this.getWriteDataList()
            },
            onOk () {
                this.ok()
            },
            addWhite () {
               // this.formInfo = {},
                this.addWhiteModel = true
            },
            async payMountFasle (obj) {
                try {
                    let res = await post('/withhold/payment',{
                        uname: obj.uname,
                        uid: obj.uid,
                        ucard: obj.ucard,
                        wtype:1,
                        amount: obj.amount,
                        uphone: obj.uphone,
                        // underAmountId:1
                    })
                    this.$Message.success(res.data)
                }catch (e){
                    this.$throw(e)
                }
            },
            async payMountSave(obj) {
                try {
                    let res = await post('/withhold/payment',{
                        uname: obj.uname,
                        uid: obj.uid,
                        ucard: obj.ucard,
                        wtype:1,
                        amount: obj.amount,
                        uphone: obj.uphone,
                        underAmountId:1
                    })
                    this.$Message.success(res.data)
                }catch (e){
                    this.$throw(e)
                }

            },
            handleOk (picker) {
                this.dataInfo.startTime = moment(picker[0]).format('YYYY-MM-DD')
                this.dataInfo.endTime = moment(picker[1]).format('YYYY-MM-DD')
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            pageChange(p) {
                this.dataFilter.page = p;
                this.getWriteDataList();
            },
            pageSizeChange(p) {
                this.dataFilter.pageSize = p;
                this.getWriteDataList();
            },
        }
    }
</script>

<style scoped>
    .demo-upload-list{
        display: inline-block;
        width: 250px;
        height: 250px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .form-item-inpu {
        width: 250px;
    }
</style>
